<template>
    <view class="wrap">
        <u-form :model="form" ref="uForm">
            <image :src="'../../' + form.cImage" v-if="form.cImage" style="width: 100%;"></image>
            <u-form-item label="选择封面图片" label-position="top">
                <u-input v-model="form.cImage" type="select" @click="images = true" />
                <u-select v-model="images" :list="list" @confirm="selectimg"></u-select>
            </u-form-item>
            <u-form-item label="竞赛名称" label-position="top"><u-input v-model="form.cName" /></u-form-item>
            <u-form-item label="竞赛开始时间" label-position="top">
                <u-input v-model="form.cStartTime" type="select" @click="show = true" />
                <u-picker v-model="show" mode="time" :params="params" @confirm="uptm"></u-picker>
            </u-form-item>
            <u-form-item label="竞赛类型" label-position="top">
                <u-radio-group v-model="form.cType">
                    <u-radio v-for="(item, index) in types" :key="index" :name="item.name" :disabled="item.disabled">{{ item.name }}</u-radio>
                </u-radio-group>
            </u-form-item>
            <u-form-item label="竞赛科目" label-position="top">
                <u-input v-model="subject" />
                <button size="mini" @click="addSub">增加</button>
            </u-form-item>
            <view class="wrap1" v-if="subjects">
                <u-tag class="ll" :text="item" mode="dark" closeable :show="true" @close="remSub(item)" v-for="(item, index) in subjects" :key="index" />
            </view>
            <u-form-item label="竞赛场地" label-position="top"><u-input v-model="form.cAdds" /></u-form-item>
            <u-form-item label="要求人数(人)" label-width="200" label-position="left"><u-number-box v-model="form.cNumbers"></u-number-box></u-form-item>
            <u-form-item label="竞赛时长(分钟)" label-width="200" label-position="left"><u-number-box v-model="form.cLangt"></u-number-box></u-form-item>
            <u-form-item label="注意事项" label-position="top"><u-input v-model="form.cAbout" type="textarea" /></u-form-item>
            <u-form-item label="负责人姓名" label-position="top"><u-input v-model="form.cUser" /></u-form-item>
            <u-form-item label="负责人联系电话" label-position="top"><u-input v-model="form.cPhone" /></u-form-item>
        </u-form>
        <view class="u-m-t-20">
            <u-row gutter="16" justify="center">
                <u-col span="10"><u-button type="primary" @click="saveData()" :ripple="true">保存</u-button></u-col>
            </u-row>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            form: {
                cSubject: [],
                cType:'个人赛'
            },
            show: false,
            images: false,
            subject: '',
            subjects: [],
            list: [
                { value: 'static/list/list_1.png', label: '1' },
                { value: 'static/list/list_2.png', label: '2' },
                { value: 'static/list/list_3.png', label: '3' },
                { value: 'static/list/list_4.png', label: '4' },
                { value: 'static/list/list_5.png', label: '5' },
                { value: 'static/list/list_6.png', label: '6' },
                { value: 'static/list/list_7.png', label: '7' },
                { value: 'static/list/list_8.png', label: '8' },
                { value: 'static/list/list_9.png', label: '9' }
            ],
            types: [
                {
                    name: '个人赛',
                    disabled: false
                },
                {
                    name: '国家赛',
                    disabled: false
                }
            ],
            params: {
                year: true,
                month: true,
                day: true,
                hour: true,
                minute: true,
                second: false
            }
        }
    },
    onLoad(opt) {
        this.info = JSON.parse(opt.p)
        JSON.parse(this.info.cSubject).forEach(v => {
            this.list.push({ value: v, label: v })
        })
        this.user = uni.getStorageSync('user_info')
        console.log(this.info)
        if (this.info) {
            this.form = this.info
            this.subjects = JSON.parse(this.form.cSubject)
        }
    },
    methods: {
        uptm(value) {
            this.form.cStartTime = value.year + '-' + value.month + '-' + value.day + ' ' + value.hour + ':' + value.minute
        },
        addSub() {
            if (this.subject.length > 0) {
                if (this.subjects.indexOf(this.subject) == -1) {
                    this.subjects.push(this.subject)
                }
                this.subject = ''
            }
        },
        remSub(value) {
            var index = this.subjects.indexOf(value)
            if (index == 0) {
                this.subjects.shift()
            } else {
                this.subjects.splice(index, index)
            }
        },
        selectimg(e) {
            this.form.cImage = e[0].value
        },
        saveData() {
            this.form.cSubject = JSON.stringify(this.subjects)
            console.log(this.form)
            this.$u.post('/apps/ssCompetitionEntity/save', this.form).then(res => {
                if (res && res.code == 200) {
                    this.$u.route({
                        type: 'switchTab',
                        url: 'pages/comp/comp_list'
                    })
                }
            })
        }
    }
}
</script>

<style lang="less" scoped>
.wrap {
    padding: 24rpx;
}
.wrap1 {
    padding: 13rpx;
}
.ll {
    margin-right: 10rpx;
    margin-bottom: 4rpx;
}
</style>
